此篇會介紹幾種 border 常會遇到的問題。

• border 溢出
• border 重疊

「Note: The border will be invisible if its style is not defined. This is because the style defaults to none.」
白話文：「如果未定義其樣式，邊框將不可見。這是因為樣式默認為none。」

border 溢出

<div class="inline-block border-[3px] border-solid border-black">
  <span class="border-[10px] border-solid border-red-700">this is text</span>
</div>

為什麼只有 inline 元素會出現 border 溢出？

W3C Inline formatting contexts：「Horizontal margins, borders, and padding are respected between these boxes.」
白話文：「box 之間的水平 margin、border、padding 會相互影響。」

簡單來說

• inline 元素的水平 border 會相互影響，因此水平的 border 會正確推擠。
• inline 元素的垂直 border 由於不會影響到其他內容的 flow 排版，導致在 layout 不動的情況下，垂直的 border 會造成樣式覆蓋其它元素。

border double

Example of margins, padding, and borders：「The margin box height of each LI box depends on its content height, plus top and bottom padding, borders, and margins.」
白話文：「每個 LI 框的邊距框高度取決於其內容高度，加上頂部和底部填充、邊框和邊距。」

reference

• Why does just top border of inline element overflow? Why not left border?